class ResourceManager {
  fileWrap
  frame
  menu
  fileList
  rightClickMenu
  selFiles = []
  constructor(fileList = [], rightClickMenu = []) {
    this.fileWrap = document.getElementById('aringFileSel')
    this.fileList = fileList
    this.rightClickMenu = rightClickMenu
    this.init()
  }
  init() {
    // 阻止文件容器中右键默认事件
    this.fileWrap.oncontextmenu = () => false

    // 在头部引入css文件
    const link = document.createElement('link')
    link.setAttribute('rel', 'stylesheet')
    link.setAttribute('href', './index.css')
    document.getElementsByTagName('head')[0].appendChild(link)

    // 创建选择区域
    this.frame = document.createElement('div')
    this.frame.setAttribute('id', 'frameArea')
    this.fileWrap.appendChild(this.frame)
    this.resetFrame()

    // 监听容器点击事件
    this.fileWrap.addEventListener('mousedown', (event) => {
      if (event.button === 2) {
        return this.rightClick(event)
      } else {
        for (let i of document.querySelectorAll('#aringFileSel .file-item')) {
          i.classList.remove('active')
        }
      }
      this.menu.style.display = 'none'
      this.frame.style.display = 'block'
      const clickLeft = event.offsetX
      const clickTop = event.offsetY
      this.frame.style.left = `${clickLeft}px`
      this.frame.style.top = `${clickTop}px`
      // 鼠标移动事件
      this.fileWrap.onmousemove = (event) => {
        this.move(event, clickLeft, clickTop)
      }
      // 松开鼠标事件
      document.documentElement.onmouseup = () => {
        this.fileWrap.onmousemove = ''
        this.choiceFile()
        document.documentElement.onmouseup = ''
      }
    })

    // 初始化渲染
    this.renderFile()
    this.renderMenu()
  }
  // 鼠标移动事件
  move(event, clickLeft, clickTop) {
    const moveLeft = event.offsetX
    const moveTop = event.offsetY
    // 获取选框元素宽高
    const width = moveLeft - clickLeft > 0 ? moveLeft - clickLeft : -(moveLeft - clickLeft)
    const height = moveTop - clickTop > 0 ? moveTop - clickTop : -(moveTop - clickTop)
    this.frame.style.width = `${width}px`
    this.frame.style.height = `${height}px`

    if (moveLeft <= clickLeft && moveTop <= clickTop) {  // 左上
      this.frame.style.left = `${moveLeft}px`
      this.frame.style.top = `${moveTop}px`
    } else if (moveLeft <= clickLeft && moveTop >= clickTop) {  // 左下
      this.frame.style.left = `${moveLeft}px`
      this.frame.style.top = `${moveTop - height}px`
    } else if (moveLeft >= clickLeft && moveTop <= clickTop) {  // 右上
      this.frame.style.left = `${clickLeft}px`
      this.frame.style.top = `${clickTop - height}px`
    } else {  // 右下
      this.frame.style.left = `${clickLeft}px`
      this.frame.style.top = `${clickTop}px`
    }
  }
  // 重置选择框
  resetFrame() {
    this.frame.style.display = 'none'
    this.frame.style.height = '0px'
    this.frame.style.width = '0px'
  }
  // 渲染文件
  renderFile() {
    if (!this.fileList instanceof Array) return console.error('传入的文件列表必须是数组！')
    for (let i of this.fileList) {
      // 文件容器
      const file = document.createElement('div')
      file.classList.add('file-item')
      // 文件展示图标
      const icon = document.createElement('i')
      icon.classList.add('iconfont')
      if (/png|jpg|jpeg|gif|webp/i.test(i.type)) {
        icon.classList.add('icon-pic')
      } else if (/mpeg|mp3|mpeg-4|midi|wma/i.test(i.type)) {
        icon.classList.add('icon-service')
      } else if (/mp4|avi|wmv|dat|flv|mkv|vob/i.test(i.type)) {
        icon.classList.add('icon-video')
      } else {
        icon.classList.add('icon-wendang')
      }
      // 文件名
      const fileName = document.createElement('span')
      fileName.innerHTML = i.name
      // 挂载属性至文件
      for (let key in i) {
        file.dataset[key] = i[key]
      }
      // 写入文件
      file.appendChild(icon)
      file.appendChild(fileName)
      this.fileWrap.appendChild(file)
    }
  }
  // 选中文件
  choiceFile() {
    const files = document.querySelectorAll('#aringFileSel .file-item')
    const l = this.frame.offsetLeft
    const t = this.frame.offsetTop
    const w = this.frame.offsetWidth
    const h = this.frame.offsetHeight
    const selFiles = []
    this.resetFrame()
    for (let i in files) {
      const sl = files[i].offsetWidth + files[i].offsetLeft
      const st = files[i].offsetHeight + files[i].offsetTop
      if (sl > l && st > t && files[i].offsetLeft < l + w && files[i].offsetTop < t + h) {
        files[i].classList.add('active')
        selFiles.push(files[i])
      }
    }
    this.selFiles = selFiles
  }
  // 渲染右键菜单
  renderMenu() {
    if (!this.rightClickMenu instanceof Array) return console.error('传入的菜单列表必须是数组！')
    this.menu = document.createElement('div')
    this.menu.classList.add('right-click-menu')
    const ul = document.createElement('ul')
    for (let i of this.rightClickMenu) {
      const menuList = document.createElement('li')
      menuList.innerHTML = i.name
      // 定义菜单功能
      menuList.addEventListener('mousedown', (event) => {
        event.stopPropagation()
        // 获取dom中挂载的属性
        const filesAttr = []
        for (let i of this.selFiles) {
          filesAttr.push(i.dataset)
        }
        // 调用传入的函数并传参
        i.onclick(this.selFiles, filesAttr)
        setTimeout(() => {
          this.menu.style.display = 'none'
        }, 200)
      })
      ul.appendChild(menuList)
    }
    this.menu.appendChild(ul)
    this.fileWrap.appendChild(this.menu)
  }
  // 鼠标右键
  rightClick(event) {
    this.menu.style.display = 'block'
    this.menu.style.left = `${event.clientX}px`
    this.menu.style.top = `${event.clientY}px`
  }
  // 刷新
  refresh(fileList) {
    this.fileList = fileList
    for (let i of document.querySelectorAll('#aringFileSel .file-item')) {
      i.remove()
    }
    this.renderFile()
  }
}